<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Stroke, Style} from 'ol/style';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import {bbox as bboxStrategy} from 'ol/loadingstrategy';
    import GeoJSON from 'ol/format/GeoJSON';


    export default {
        name: 'WFS',
        data() {
            return {
            }
        },
        mounted() {
            const vectorSource = new VectorSource({
                format: new GeoJSON(),
                url: function (extent) {
                    return (
                        'https://ahocevar.com/geoserver/wfs?service=WFS&' +
                        'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
                        'outputFormat=application/json&srsname=EPSG:3857&' +
                        'bbox=' +
                        extent.join(',') +
                        ',EPSG:3857'
                    );
                },
                strategy: bboxStrategy,
            });
            const vector = new VectorLayer({
                source: vectorSource,
                style: new Style({
                    stroke: new Stroke({
                        color: 'rgba(0, 0, 255, 1.0)',
                        width: 2,
                    }),
                }),
            });
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }),
                    vector
                ],
                //配置视图
                view: new View({
                    center: [-8908887.277395891, 5381918.072437216], //视图中心位置
                    projection: "EPSG:3857", //指定投影
                    zoom: 12   //缩放到的级别
                })
            });
        },
        methods: {
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
    }
</style>
